<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        canvas {
            border: 1px solid;
        }
    </style>
</head>

<body>
    <canvas id="mycanvas" width="600" height="600"></canvas>
    <script>

        /* 
        
            var obj = {
                img2:"第二张",
                img3:"第三张",
                img1:"第一张",
            }

            obj.img1
        
        */


        var canvas = document.querySelector("#mycanvas");
        var context = canvas.getContext("2d");

        
        var imgsObj = {
            img1: "https://img0.baidu.com/it/u=2028084904,3939052004&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500",
            img2: "https://img1.baidu.com/it/u=3573056321,2239143646&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500",
            img3: "https://img2.baidu.com/it/u=617579813,2960860841&fm=253&fmt=auto&app=120&f=JPEG?w=1280&h=800"
        }
        // console.log(imgsObj.length);

        function loadImgs(imgsObj, cb) {

            // var length = 0;;

            // for(var i in imgsObj){
            //     length++;
            // }

            // console.log(length);

            var length = Object.keys(imgsObj).length;
            // console.log(length);
            // 循环对象 ；

            var resObj = {};
            var num = 0;
            for (let key in imgsObj) {
                if (imgsObj.hasOwnProperty(key)) {
                    var img = document.createElement("img");
                    img.src = imgsObj[key];
                    img.onload = function(){
                        num++;
                        resObj[key] = this;
                        if(num===length){
                            cb && cb(resObj);
                        }
                    }
                }
            }
        }

        loadImgs(imgsObj, function (resObj) {
            console.log(resObj);
            // console.log(imgArr);
            context.drawImage(resObj.img1, 0, 0, 100, 100)
            context.drawImage(resObj.img2, 100, 100, 100, 100)
            context.drawImage(resObj.img3, 200, 200, 100, 100)

        });










    </script>
</body>

</html>